import React, { FC } from 'react';
import { Form, Row, Col, Card, Modal, Button } from 'antd';
import {
  MinioUploadListType,
  MinioUpload,
  FormPanel,
  RuleType,
  ExtendReader,
  FormPanelStatus,
  type FormPanelObject,
  InputType,
  useAuth
} from 'lfun-bg-comp';
import styles from './index.less';
import { GENDER } from '@/constant/basicOptions';
import { ID_TYPE } from '@/constant/studentOptions';
import NameIcon from '@/view/component/nameIcon';
import Logs from './logs';

const ChildrenForm: React.FC<{ show: boolean; onChange: Function; value: any; onSave: Function }> = ({
  show,
  onChange,
  value,
  onSave,
}) => {
  const list = [
    {
      title: '',
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      span: 24,
      inputs: [
        {
          label: '学生姓名',
          name: 'student_name',
          key: 'student_name',
          required: true,
        },
        {
          label: '出生日期',
          name: 'birthday',
          key: 'birthday',
          relationFields: ['id_number'],
          required: true,
          inputType: InputType.date,
          render: (formObjectPanel: FormPanelObject) => {
            const id_type = formObjectPanel.getFieldValue('id_type');
            if (id_type !== 'resident_id_card') {
              return formObjectPanel.getFieldValue('birthday');
            }
            return ExtendReader.renderBirthday('id_number', 'birthday', formObjectPanel);
          },
        },
        {
          label: '性别',
          name: 'student_gender',
          key: 'student_gender',
          relationFields: ['id_number'],
          required: true,
          inputType: InputType.select,
          renderOption: GENDER,
          render: (formObjectPanel: FormPanelObject) => {
            const id_type = formObjectPanel.getFieldValue('id_type');
            if (id_type !== 'resident_id_card') {
              return formObjectPanel.getFieldValue('student_gender');
            }
            return ExtendReader.renderGender('id_number', 'student_gender', formObjectPanel);
          },
        },
        {
          label: '身份证件类型',
          name: 'id_type',
          key: 'id_type',
          relationFields: ['id_number'],
          inputType: InputType.select,
          renderOption: ID_TYPE,
        },
        {
          label: '身份证件号码',
          name: 'id_number',
          key: 'id_number',
          relationFields: ['birthday', 'student_gender'],
          ruleType: (formObjectPanel: FormPanelObject) => {
            const id_type = formObjectPanel.getFieldValue('id_type');
            if (id_type === 'resident_id_card') {
              return 'cnPeopleNo';
            }
            return '';
          },
          renderValidate: (formOjbectPanel: FormPanelObject) => {
            const id_type = formOjbectPanel.getFieldValue('id_type');
            if (id_type === 'resident_id_card') {
              return ExtendReader.validateCnPeopleNo(
                formOjbectPanel.getFieldValue('id_number'),
                formOjbectPanel.getFieldValue('birthday'),
                formOjbectPanel.getFieldValue('student_gender')
              );
            }
            return '';
          },
        },
      ],
    },
  ];
  return (
    <>
      <Modal title="学生信息变更" width="50%" footer={[]} open={show} onCancel={() => onChange(false)}>
        <FormPanel
          btnsAlign="center"
          restBtnText="返回"
          submitBtnText="确定"
          buttonsDisplay="block"
          onReset={() => onChange(false)}
          onFinish={async (formPanelObject: FormPanelObject) => {
            if (onSave) {
              onSave(formPanelObject);
            }
          }}
          values={value}
          template={list}
        />
      </Modal>
    </>
  );
};

type BasicTopParams = {
  onLoad?: Function;
  onSave?: Function;
  onSavePhoto?: Function;
  value: any;
  isEdit?: boolean;
};

const Groups: FC<BasicTopParams> = ({ onLoad, onSave, onSavePhoto, value, isEdit }) => {
  const list = [
    {
      title: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      inputs: [
        {
          label: '',
          name: 'student_name',
          key: 'student_name',
          inputType: 'children',
          span: 24,
          props: {
            className: 'allow-edit',
          },
          children: (
            <NameIcon
              value=""
              isEdit={isEdit}
              onClick={() => {
                setShowEditForm(true);
              }}
            />
          ),
        },
        {
          label: '学籍号',
          name: 'enrollment_number',
          key: 'enrollment_number',
          required: true,
          textRange: [0, 10],
        },
        {
          label: '出生日期',
          name: 'birthday',
          key: 'birthday',
          required: true,
          inputType: InputType.date,
        },
        {
          label: '性别',
          name: 'student_gender',
          key: 'student_gender',
          required: true,
          inputType: InputType.select,
          renderOption: GENDER,
        },
        {
          label: '身份证件类型',
          name: 'id_type',
          key: 'id_type',
          required: true,
          textRange: [0, 255],
          inputType: InputType.select,
          renderOption: ID_TYPE,
        },
        {
          label: '身份证号',
          name: 'id_number',
          key: 'id_number',
          required: true,
          ruleType: RuleType.cnPostalCode,
        },
      ],
    },
  ];

  const photoForm = Form.useForm()[0];
  //const [values, setValues] = React.useState(value);
  const [showEditForm, setShowEditForm] = React.useState(false);
  const [showLogs, setShowLogs] = React.useState(false);
  const auth = useAuth();
  const user = auth?.user || {};

  return (
    <Card className={styles.top_card}>
      {/* {isEdit ? (
        ''
      ) : (
        <>
          <Button
            style={{
              position: 'absolute',
              top: '240px',
              zIndex: '999',
              right: '50px',
            }}
            type="primary"
            onClick={() => setShowLogs(true)}
          >
            变更日志
          </Button>
          <Logs show={showLogs} onClose={() => setShowLogs(false)} title={value.student_name} />
        </>
      )} */}
      <Button
        style={{
          position: 'absolute',
          top: '240px',
          zIndex: '999',
          right: '50px',
        }}
        type="primary"
        onClick={() => setShowLogs(true)}
      >
        变更日志
      </Button>
      <Logs show={showLogs} onClose={() => setShowLogs(false)} title={value.student_name} />
      <Row>
        <Col span="6" className={styles.poto}>
          <Form form={photoForm}>
            {/* rules={[{ required: true, message: '请上传照片' }]} */}
            <Form.Item name="photo">
              <MinioUpload
                listType={MinioUploadListType.pictureCard}
                supportFileTypes={['image/jpeg', 'image/jpg']}
                maxSize={1}
                fileNamePrefix={user.phone || user.name}
                value={
                  value?.photo
                    ? [
                        {
                          name: '_.jpg',
                          url: value?.photo_url,
                          uid: value?.photo,
                        },
                      ]
                    : []
                }
                text="上传照片"
                isPrivate={false}
                uploadSrv="/school/v1/storage/school-upload-uri"
                onChange={(file, fileList) => {
                  console.log(file, fileList);
                  onSavePhoto(file);
                }}
              />
              <span className={styles.poto_tip} style={{ color: '#faad14' }}>上传支持JPG、JPEG文件大小60k,支持规格26mmx32mm</span>
            </Form.Item>
          </Form>
        </Col>
        {/* className={styles.basic_top_info} */}
        <Col span="18" className={styles.form_Card}>
          <FormPanel
            onLoad={cntForm => {
              if (typeof onLoad === 'function') {
                onLoad(cntForm, photoForm);
              }
            }}
            formStatus={FormPanelStatus.nonEdit}
            buttonsDisplay="none"
            template={list}
            values={value}
          />
          <ChildrenForm
            value={value}
            show={showEditForm}
            onChange={setShowEditForm}
            onSave={(formPanelObject: FormPanelObject) => {
              if (onSave(formPanelObject)) {
                setShowEditForm(false);
              }
            }}
          />
        </Col>
      </Row>
    </Card>
  );
};

Groups.defaultProps = {
  onLoad: () => {},
  onSave: () => {},
  onSavePhoto: () => {},
  isEdit: true,
};

export default Groups;
